<template>
  <div class="container-quill">
     <quill-editor class="ql-editor" :value="question" ref="myQuillEditor" :options="editorOption" @change="Onchange">
    </quill-editor>
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

export default {
  props: {
    question: {
      type: String,
      default: ''
    }
  },
  components: {
    quillEditor
  },
  data () {
    return {
      detail: '',
      editorOption: {
        placeholder: ''
      }
    }
  },
  methods: {
    Onchange (e) {
      this.$emit('update:question', e.html)
    }
  }
}
</script>

<style lang="scss">
.container-quill {
  // height: 200px;
  // .ql-blank {
  //   // height: 200px;
  // }
  .ql-editor {
    line-height: 0;
    padding:12px 15px 12px 0;
    height: 200px;
    overflow: visible !important;
    margin-bottom: 20px;

  }
}
</style>
